<template>
	<div class="pound-container">
		<div class="pound-top">

			<div class="pound-center">

				<div class="lights">
					<div class="lights_info" :class="{'green':!!(weight === 0)}">
						<div class="desc">绿灯表示磅面无车</div>
						<div class="circle"></div>
					</div>
					<div class="lights_info" :class="{'red':!!(weight > 0)}">
						<div class="circle"></div>
						<div class="desc">红灯表示磅面有车</div>
					</div>
				</div>

				<el-image class="pic-pound" style="height: 100%;width: 50%;" fit="contain" :src="poundImg"
					alt="此时有辆车" />
				<el-image v-if="weight > 0" class="pic-truck" fit="contain" :src="kache"
					style="height: 100px;width: 120px;" alt="此时有辆车" />

				<div class="weight">
					{{ weight > 0 ? weight + '吨' : '' }}
				</div>
			</div>

			<div class="pound-center">

				<div class="lights">
					<div class="lights_info" :class="{'green':!!(weight === 0)}">
						<div class="desc">绿灯表示磅面无车</div>
						<div class="circle"></div>
					</div>
					<div class="lights_info" :class="{'red':!!(weight > 0)}">
						<div class="circle"></div>
						<div class="desc">红灯表示磅面有车</div>
					</div>
				</div>

				<el-image class="pic-pound" style="height: 100%;width: 50%;" fit="contain" :src="poundImg"
					alt="此时有辆车" />
				<el-image v-if="weight > 0" class="pic-truck" fit="contain" :src="kache"
					style="height: 100px;width: 120px;" alt="此时有辆车" />

				<div class="weight">
					{{ weight > 0 ? weight + '吨' : '' }}
				</div>
			</div>



		</div>
		<div class="pound-bottom" v-if="weight > 0">
			<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane label="地磅实时数据" name="first">
					<el-card>
						<template #header>
							<div class="card-header" style="font-size: 24px;font-weight: 550;">
								<span>地磅实时数据</span>
							</div>
						</template>
						<el-table :data="tableData" border style="width: 100%">
							<el-table-column prop="time" label="时间" width="200" />
							<el-table-column prop="code" label="车牌号" width="120" />
							<el-table-column prop="goods" label="货物" />
							<el-table-column prop="tare" label="皮重" />
							<el-table-column prop="grossWeight" label="毛重" />
							<el-table-column prop="netWeight" label="净重" />
						</el-table>

						<div style="margin-top: 5px; display: flex;flex-direction:row-reverse;">
							<el-pagination v-if="total>0" v-model:current-page="listQuery.current"
								v-model:page-size="listQuery.size" :page-sizes="[5, 8, 10]" :size="size"
								:background="false" layout="sizes, prev, pager, next" :total="total"
								@size-change="handleSizeChange" @current-change="handleCurrentChange" />
						</div>
					</el-card>
				</el-tab-pane>
				<el-tab-pane label="地磅历史数据" name="second">
					<el-card>
						<template #header>
							<div class="card-header" style="font-size: 24px;font-weight: 550;">
								<span>地磅历史数据</span>
							</div>
						</template>

						<el-form :inline="true" :model="formInline" class="demo-form-inline">
							<el-form-item label="过磅时间">
								<el-date-picker v-model="formInline.time" format="YYYY-MM-DD hh:mm:ss"
									value-format="YYYY-MM-DD hh:mm:ss" type="datetime" placeholder="请选择过磅时间" />
							</el-form-item>
							<el-form-item label="车牌号">
								<el-input v-model="formInline.code" placeholder="请输入车牌号" clearable />
							</el-form-item>

							<el-form-item>
								<el-button type="primary" @click="onSubmit">查 询</el-button>
							</el-form-item>
						</el-form>



						<el-table :data="tableData" border style="width: 100%">
							<el-table-column prop="time" label="时间" width="200" />
							<el-table-column prop="code" label="车牌号" width="120" />
							<el-table-column prop="goods" label="货物" />
							<el-table-column prop="tare" label="皮重" />
							<el-table-column prop="grossWeight" label="毛重" />
							<el-table-column prop="netWeight" label="净重" />
						</el-table>

						<div style="margin-top: 5px; display: flex;flex-direction:row-reverse;">
							<el-pagination v-if="hstotal>0" v-model:current-page="hslistQuery.current"
								v-model:page-size="hslistQuery.size" :page-sizes="[5, 8, 10]" :size="size"
								:background="false" layout="sizes, prev, pager, next" :total="hstotal"
								@size-change="handleSizeChange" @current-change="handleCurrentChange" />
						</div>
					</el-card>
				</el-tab-pane>

			</el-tabs>



		</div>

	</div>


</template>

<script setup lang="ts">
	import {
		ref,
		reactive,
		onMounted,
		onBeforeUnmount,
	} from 'vue';
	import poundImg from '@/assets/pound.png';
	import kache from '@/assets/kache.png';
	import type { ComponentSize } from 'element-plus'
	const size = ref<ComponentSize>('default')

	const activeName = ref('first')
	const weight = ref(38.5)
	const poundRoom = ref(1)
	const title = ref('磅房实时数据')
	const tableData = [
		{
			time: '2025-03-13 15:00:00',
			code: '冀A75235',
			goods: '石油焦',
			tare: '14.5',
			grossWeight: '38.5',
			netWeight: '24',
		},

	]

	const formInline = reactive({
		time: '',
		code: '',

	})
	const listQuery = reactive({
		current: 1,
		size: 5,

	})
	const hslistQuery = reactive({
		current: 1,
		size: 5,

	})
	const total = ref(5)
	const hstotal = ref(5)
	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
	}

	const onSubmit = () => {
		console.log('submit!')
	}

	const handleClick = (tab : TabsPaneContext, event : Event) => {
		console.log(tab, event)
	}
</script>

<style lang="scss" scoped>
	.pound-container {
		box-sizing: border-box;
		position: relative;



		.pound-top {

			width: 100%;
			/* margin-left: 3%; */
			background: #fff;

			padding: 20px 10px 20px 10px;
			border-radius: 20px;
			-webkit-box-shadow: 3px 3px 3px #ddd;
			box-shadow: 0 0px 10px #999;
			height: 240px;
			display: flex;

			.pound-center {
				margin: 0 5px;
				width: 50%;
				position: relative;
				// flex: 1;
				background: rgba(230, 230, 230, 0.39);

				box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
				display: flex;
				height: 100%;

				justify-content: space-between;
				align-items: center;

				.pic-truck {
					// flex:1;
					position: absolute;
					left: 50%;
					transform: translate(-50%, -50%);
					top: 55%;
				}

				.pic-pound {
					position: absolute;
					left: 50%;
					transform: translate(-50%, -50%);
					top: 58%;
					width: 80%;

				}

				.title {
					position: absolute;
					bottom: 0px;
					width: 100%;
					text-align: left;
					font-size: 16px;
					padding-left: 5px;
					text-align: center;
					font-weight: bold;
				}

				.weight-title {
					padding-left: 0px;
					text-align: center;
					font-size: 20px;
					font-weight: bold;
				}

				.weight {
					position: absolute;
					bottom: 20px;
					color: #06d53f;
					width: 100%;
					text-align: center;
					font-size: 26px;
					font-weight: bold;
				}



				.lights {

					display: flex;

					position: absolute;
					top: 6px;
					text-align: center;
					width: 100%;
					justify-content: center;

					&_info {
						display: flex;
						align-items: center;

						.circle {
							margin-right: 5px;
							width: 14px;
							height: 14px;
							background-color: #999;
							border-radius: 50%;
						}

						.desc {

							font-size: 14px;
							visibility: hidden;
						}
					}

					// &_info:first-child {
					// 	margin-bottom: 3px;
					// }

					&_info.red {
						.circle {
							background-color: #f00;
						}

						.desc {
							visibility: visible;
						}
					}

					&_info.green {
						.circle {
							background-color: #33FF33;
						}

						.desc {
							visibility: visible;
						}
					}
				}

			}




		}

		.pound-bottom {

			width: 1500px;
			margin-top: 50px;
		}
	}
</style>